//@ts-nocheck
import { setbookdan } from "./API";
import { useState,useEffect } from "react";
import { useParams,useNavigate } from "react-router-dom";
import {NavBar} from "antd-mobile";
import style from "../css/bookdan.module.css"
export default ()=>{
    let params=useParams();
    let nav=useNavigate();
    let [list,setList]=useState({})
    let getbookdan=async ()=>{
        // console.log(params);
        let a={goods_id:params.id?.split("=")[1]}
        let {data}=await setbookdan(a);
        console.log(data.data);
        list=data.data;
        setList({...list})
    };
    let back = () => {
      nav(-1);
    };
    useEffect(()=>{
        getbookdan();
    },[])
    return (
      <div>
        <NavBar
          style={{
            "--height": "36px",
            "--border-bottom": "1px #eee solid",
          }}
          onBack={back}
        >
         <h5 className={style.h}>书单详情</h5>
        </NavBar>
        <div className={style.box}>
          <div className={style.b1}>
            <img width={"280px"} src={list.goods_thumb} alt="" />
            <h1>{list.goods_name}</h1>
            {!list.label_list
              ? ""
              : list.label_list.map((item) => {
                  return <span key={item.id}>{item.label_name}</span>;
                })}
          </div>
          <div className={style.b2}>
            <h2>书籍列表</h2>
            {!list.son_list?"": list.son_list.map((a)=>{
              return (
                <div key={a.goods_id} onClick={()=>{nav("/bookxq/id=" + a.goods_id);}}>
                  <img width={"100px"} src={a.goods_img} alt="" />
                  <div>
                    <h3>{a.goods_name}</h3>
                    <p>
                      {a.expert_speak_info.description
                        ? a.expert_speak_info.description
                        : a.goods_desc}
                    </p>
                    <img
                      width={"30px"}
                      src={a.expert_speak_info.avatar}
                      alt=""
                    />{" "}
                    <span>{a.expert_speak_info.name}</span>
                  </div>
                </div>
              );
            })}
            
          </div>
        </div>
      </div>
    );
}